<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>作业二2021-12-23</title>
		
	</head>
	<style>
		*{margin: 0; padding: 0;}

		#xuanxiang{
			width: 400px;
			height: 10px;
			position: relative;
		}
		button{
			border-style: none;
			background: none;
			margin-left: 20px;
		}
		#tupian{
			width: 420px;
			height: 320px;
			background-color: deepskyblue;
			/*opacity: 0.2;*/
			border: 1px black solid;
			margin-top: 20px;
			position: relative;
		}
		#tupian img{
			/*opacity: 0.5;*/
			width: 400px;
			height: 300px;
			position: absolute;
			/*line-height: 300px;*/
			top: 0;left: 0;right: 0;bottom: 0;		/*水水平垂直居中*/
			margin: auto;
		}

		button:active,
		button:focus{
			color: red;
		}

	</style>
	<body >
		<center>
		<div id="xuanxiang">
			<!--input type="button" value="删除" onclick="deleteRow('1')">-->
		<button id="btn1" onclick="dianji(num='1')">选项一</button>
		<button id="btn2" onclick="dianji(num='2')">选项二</button>
		<button id="btn3" onclick="dianji(num='3')">选项三</button>
		<button id="btn4" onclick="dianji(num='4')">选项四</button>
		<button id="btn5" onclick="dianji(num='5')">选项五</button>
		</div>
		
		<div id="tupian">
			<img src="img/1.jpeg" id="img1"/>
		</div>
		</center>
	</body>
	<script type="text/javascript">
//		var img=document.getElementById("img1").src
//		console.log(img)
			function dianji(){
				if(num==1){
					document.getElementById("img1").src="img/1.jpeg"
				}else if(num==2){
					document.getElementById("img1").src="img/2.jpeg"
				}else if(num==3){
					document.getElementById("img1").src="img/3.jpeg"
				}else if(num==4){
					document.getElementById("img1").src="img/4.jpeg"
				}else{
					document.getElementById("img1").src="img/5.jpeg"
				}
			}
			
	</script>
</html>
